// 页面比例：1920 * 967

// 缩放原则：
// 1 按宽高最短原则，即按最小比例缩放，始终显示完整页面。高度或宽度不会溢出，会留白。
// 2 按宽高最长原则，即按最大比例缩放。宽度或者高度会溢出、不留白。
// 3 按视图高度，以视图高度缩放为准。宽度可能会溢出、或留白。
// 4 按视图宽度，以视图宽度缩放为准。高度可能会溢出、或留白。
// 最好项目初始时，要规划好，不然后续调整会很容易翻车，出现遗漏点。

// 配置路径，动态设置缩放类型。
// 1 按宽高最短原则 [页面始终保持模板比例。说明：不允许水平溢出滚动和垂直溢出滚动，接受水平留白和垂直留白，尝试用这个]
let zoom_1 = []
let zoom_1_exclude = []
// 2 按宽高最长原则 [页面始终保持模板比例。说明：不允许水平留白和垂直留白，接受水平溢出滚动和垂直溢出滚动，尝试用这个]
let zoom_2 = []
let zoom_2_exclude = []
// 3 按视图高度 [保持高度缩放。说明：不允许底部留白和垂直溢出滚动，接受水平留白和水平溢出滚动，尝试用这个]
let zoom_3 = []
let zoom_3_exclude = []
// 4 按视图宽度 [保持宽度缩放。说明：不允许水平留白和水平溢出滚动，接受底部留白和垂直溢出滚动，尝试用这个] -- 默认项
let zoom_4 = []
let zoom_4_exclude = []

// 配置路径，固定app高度。仅用于：使用element无限滚动组件、组件高度不固定flex=1的页面：需要app高度始终固定为视图高度，添加 maxHeight = minHeight, 即设置固定height。
let fixedPage = []
let fixedPageExclude = []

// 页面加载完成后，执行bodyScale函数
window.onload = function() {
	// 当窗口大小改动时，执行bodyScale函数
	window.onresize = bodyScale;
	// 初始化页面后，如果窗口不是1920，立即执行bodyScale函数
	const deviceWidth = document.documentElement.clientWidth
	const deviceHeight = document.documentElement.clientHeight
	if (deviceWidth !== 1920 || deviceHeight !== 967) {
		bodyScale()
	} else {
		// 延迟恢复无限滚动（确保 DOM 完全渲染）
		if (window.vueApp) {
			setTimeout(() => {
				window.vueApp.infiniteScrollEnabled = true;
			}, 500);
		}
	}
}

//  页面缩放函数
function bodyScale() {
	// 禁用无限滚动
	if (window.vueApp && 'infiniteScrollEnabled' in window.vueApp) {
		window.vueApp.infiniteScrollEnabled = false;
	}

	// 获取放大缩小倍数
	let zoom = getZoom()
	// 设置放大缩小倍数
	const app = document.getElementById("app")
	// app主容器最小高度是100vh，窗口缩放时，100vh就是缩放后的窗口高度，但是再加上zoom缩放，100vh相当于重复缩放了
	app.style.minHeight = 100 / zoom + 'vh'
	if (isFixedPage()) {
		// 固定高度页面 maxHeight = minHeight
		app.style.maxHeight = 100 / zoom + 'vh'
		app.style.overflowY = 'auto'
	}

	app.style.zoom = String(zoom)
	// 延迟恢复无限滚动（确保 DOM 完全渲染）
	if (window.vueApp) {
		setTimeout(() => {
			window.vueApp.infiniteScrollEnabled = true;
		}, 500);
	}
}

// 获取当前分辨率下的放大缩小倍数
function getZoom() {
	// 获取当前分辨率下的可视区域宽度
	const deviceWidth = document.documentElement.clientWidth
	const deviceHeight = document.documentElement.clientHeight
	let zoom_1 = deviceWidth / 1920
	let zoom_2 = deviceHeight / 967

	let zoomType = getZoomType()
	if (zoomType === 1) {
		// 按最短原则，返回放大缩小倍数
		return zoom_1 > zoom_2 ? zoom_2 : zoom_1
	} else if (zoomType === 2) {
		// 按最长原则，返回放大缩小倍数
		return zoom_1 > zoom_2 ? zoom_1 : zoom_2
	} else if (zoomType === 3) {
		// 按视图高度，返回放大缩小倍数
		return zoom_2
	} else if (zoomType === 4) {
		// 按视图宽度，返回放大缩小倍数
		return zoom_1
	} else {
		return zoom_1 > zoom_2 ? zoom_2 : zoom_1
	}
}

// 获取当前页面缩放类型
function getZoomType() {
	if (regexMatch(zoom_1) && !zoom_1_exclude.includes(window.location.pathname)) {
		return 1
	} else if (regexMatch(zoom_2) && !zoom_2_exclude.includes(window.location.pathname)) {
		return 2
	} else if (regexMatch(zoom_3) && !zoom_3_exclude.includes(window.location.pathname)) {
		return 3
	} else if (regexMatch(zoom_4) && !zoom_4_exclude.includes(window.location.pathname)) {
		return 4
	} else {
		return 1
	}
}

// 判断是否固定高度的页面
function isFixedPage() {
	// 如果当前页面在排除列表中，则返回false
	if (fixedPageExclude.includes(window.location.pathname)) {
		return false
	}
	return regexMatch(fixedPage)
}

// 正则匹配
function regexMatch(pageList) {
	// 将通配符模式转换为正则表达式
	const regexPatterns = pageList.map(pattern => {
		// 替换 '*' 为匹配任意单个字符串（保留前后斜杠）
		let regexStr = pattern.replace(/\*/g, '[^/]+');
		// 确保整个路径匹配
		return new RegExp('^' + regexStr + '$');
	});

	// 检查路径是否匹配
	return regexPatterns.some(regex => regex.test(window.location.pathname));
}